<template>
	<view>
		<view class="box">   
			<view class="boxItem" style="margin-bottom: 8rpx;" @tap="selectImg">
				<text class="title">头像</text>
				<view class="boxRight2">
					<image :src="userInfo.avatar" @error="$errorImg(userInfo,'avatar')" mode="aspectFill"></image>
					<text class="gui-icons">&#xe601;</text>
				</view>
			</view>
			<view class="boxItem" @tap="$u.to('changeName?data='+userInfo.nickname+'&type=1')">
				<text class="title">昵称</text>
				<view class="boxRight">
					<text>{{userInfo.nickname}}</text>
					<text class="gui-icons">&#xe601;</text>
				</view>
			</view>
			<!-- <view class="boxItem" @tap="$u.to('changePwd')">
				<text class="title">修改密码</text>
				<view class="boxRight">
					<text></text>
					<text class="gui-icons">&#xe601;</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			console.log(this.userInfo);
		},
		computed:{
			...mapState(['userInfo'])
		},
		methods: {
			...mapMutations(['login']),
			selectImg(){
				uni.chooseImage({
					count      : 1, 
					sizeType   : ['compressed'],
					sourceType : ['album', 'camera'],
					success    : (res) => {
						uni.navigateTo({
							url:'changeHead?headImg='+res.tempFilePaths[0]
						})
					}
				});
			},
			goPhone(){
				if(!this.userInfo.phone){
					this.$u.to('../login/login')
				}
			},
		}
	}
</script>

<style lang="less">
page{background: #F6F7F8;}	
.box{
	padding-top: 8rpx;
	.boxItem{
		display: flex;align-items: center;justify-content: space-between;padding: 30rpx;background: #FFFFFF;
		border-bottom: 1px solid #F6F7F8;
		.title{font-size: 28rpx;color: #666666;}
		.boxRight2{
			display: flex;align-items: center;
			.gui-icons{font-size: 32rpx;color: #999;margin-left: 15rpx;}
			image{width: 90rpx;height: 90rpx;border-radius: 50%;}
		}
		.boxRight{
			font-size: 28rpx;
			.gui-icons{font-size: 32rpx;color: #999;margin-left: 15rpx;}
		}
	}
}
</style>
